<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .base1{
            color: red;
        }
        .base2{
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--
    如何通过js代码实现页面中元素的操作   dom
-->

<div id="box"></div>
<button id="add">添加文字颜色</button>
<button id="change">改变文字大小</button>

<script>
    //  通过js代码  添加一个段落到页面中  内容是 hello javascript    <p></p>
    var p = document.createElement("p");
    // 添加标签内容   <p>hello javascript</p>
    p.innerText = "hello javascript"

    // 获取id为box元素
    var box = document.getElementById("box")
    box.append(p)


    // 调整css样式  内联样式
    // box.style.color = "orange"
    // box.style.fontSize="130px"


    //  通过添加内部样式实现css设置
    // box.className = 'base1 base2'
    // box.classList.add("base1")
    // box.classList.add("base2")


    // 如何给页面元素绑定单击事件   1.获取绑定事件的对象  2. 绑定事件类型  3. 编写事件任务
   var addBtn =  document.getElementById("add")
   addBtn.onclick = function () {
       box.classList.add("base1")
   }

    var changeBtn =  document.getElementById("change")
    changeBtn.onclick = function () {
        box.classList.add("base2")
    }

</script>
</body>
</html>